import { Fragment } from '@/components/Fragment'; 
import {
  Button,
  Card,
  Collection,
  Flex,
  View,
  Text,
  Heading,
} from '@aws-amplify/ui-react';
import { countries } from 'countries-list';
import { CollectionDemo } from './demo';
import { Example, ExampleCode } from '@/components/Example';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';
import {
  CollectionStylePropExample,
  CollectionThemeExample,
  DefaultCollectionExample,
  GridCollectionExample,
  ListCollectionExample,
  LocalCollectionClassExample,
  PaginationCollectionExample,
  SearchCollectionExample,
  SearchNoResultsFoundCollectionExample,
  StylingCollectionExample,
} from './examples';

## Demo

<CollectionDemo />

## Usage

Import the `Collection` component and provide your own repeating component as a function. Here's an example using the `list` collection `type`.

<Example>
  <DefaultCollectionExample />
  <ExampleCode>

```tsx file=./examples/DefaultCollectionExample.tsx

```

  </ExampleCode>
</Example>

## Collection types

Collection `type` options include `list` and `grid`.

### List

The `list` collection type can be customized with any of following Flex props: `alignItems`, `alignContent`, `direction`, `gap`, `justifyContent`, `wrap`.

<Example>
  <ListCollectionExample />

  <ExampleCode>

```tsx file=./examples/ListCollectionExample.tsx

```

  </ExampleCode>
</Example>

### Grid

The `grid` collection type can be customized with the following Grid props: `templateColumns` and `templateRows`. Then the Collection children can use the Grid props to control their size and placement such as `row` and `column`.

<Example>
  <GridCollectionExample />
  <ExampleCode>

```tsx file=./examples/GridCollectionExample.tsx

```

  </ExampleCode>
</Example>

## Pagination

A Collection can be paginated by adding a special `isPaginated` property. Change the page size by passing a `itemsPerPage` property (default: 10).

<Example>
  <PaginationCollectionExample />
  <ExampleCode>

```tsx file=./examples/PaginationCollectionExample.tsx

```

  </ExampleCode>
</Example>

## Search

Collections can also be filtered, adding a `isSearchable` property. Pass a custom `searchFilter` function to enhance your search experience (default search filter looks for any string-like property inside of items)

<Example>
  <SearchCollectionExample />
  <ExampleCode>

```tsx file=./examples/SearchCollectionExample.tsx

```

  </ExampleCode>
</Example>

### No Results Found

To handle the case when no results are found from the search, you can pass a custom `ReactNode` (includes `string`) to the `searchNoResultsFound` prop. By default, Collection renders the text "No results found".

<Example>
  <SearchNoResultsFoundCollectionExample />
  <ExampleCode>

```tsx file=./examples/SearchNoResultsFoundCollectionExample.tsx

```

  </ExampleCode>
</Example>

## Customization

<ThemeExample component="Collection">
  <Example>
    <CollectionThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/CollectionThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="Collection" />

### Global Styling

To override the styling on all Collections you can use the built in `.amplify-collection` class.

<Example>
<StylingCollectionExample />
<ExampleCode>

```css
.amplify-collection {
  --amplify-components-collection-pagination-current-color: var(
    --amplify-colors-brand-secondary-20
  );
  --amplify-components-collection-pagination-current-background-color: var(
    --amplify-colors-teal-80
  );
}
```

</ExampleCode>
</Example>

### Local Styling

To override styling on a specific Collection, you can use a class selector or style props.

_Using a class selector:_

<Example>
  <LocalCollectionClassExample />
  <ExampleCode>

```tsx file=./examples/LocalCollectionClassExample.tsx

```

  </ExampleCode>
  <ExampleCode>

```css
.collection-local-styling-example {
  flex-wrap: wrap;
  gap: 20px;
  padding: 5px;
}

.collection-local-styling-example .amplify-collection-items {
  flex-wrap: wrap;
  gap: 20px;
}

.collection-local-styling-example .amplify-button {
  background-color: var(--amplify-colors-neutral-60);
}
```

  </ExampleCode>
</Example>

_Using style props:_

<Example>
  <CollectionStylePropExample />
  <ExampleCode>

```tsx file=./examples/CollectionStylePropExample.tsx

```

  </ExampleCode>
</Example>